<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        body {
            background: rgb(157, 193, 235);
        }

        .box {

            margin: auto;
            border: solid 1px black;
            height: 300px;
            width: 600px;
            margin-top: 30px;
        }

        .box span {
            font-size: 20px;

        }

        h2 {
            font-size: 32px;
            height: 50px;
            width: 100px;
            margin: auto;
            margin-top: 50px;
        }

        #ipt1 {
            width: 300px;
            height: 40px;
            margin-top: 40px;

        }

        #ipt2 {
            margin-top: 50px;
            width: 300px;
            height: 40px;

        }

        #ipt3 {
            width: 100px;
            height: 36px;
            margin-top: 70px;

        }
        #ipt4 {
            width: 100px;
            height: 36px;
            margin-top: 70px;

        }
        .one {

            width: 400px;
            height: 40px;
            margin: auto;
        }

        .two {

            width: 400px;
            height: 40px;
            margin: auto;
        }

        .three {
            width: 100px;
            height: 36px;
            margin: auto;
            float: left;
            margin-left: 150px;
            
        }
        .four{
            width: 100px;
            height: 36px;
            margin: auto;
            float:left;
            margin-left: 100px;
        }
        .five img {
            width: 120px;
            height: 70px;
            float: right;
            margin-top: 80px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <h2>登录</h2>
    <div class="box">
        <div class="one">
            <span>用户名：</span>
            <input type="text" name="" id="ipt1" value="" />
        </div>
        <br />
        <div class="two">
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" name="" id="ipt2" value="" />
        </div>
        <br />
        <div class="three">
            <input type="button" name="" id="ipt3" value="登录" />
             
        </div>
        <div class="four">
           <input type="button" name="" id="ipt4" value="注册" />
        </div>
        <br />
        <div class="five">
            <img src="../img/logo.png" alt="">
        </div>
    </div>

    <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        let ipts = document.querySelectorAll('input')
        ipts[2].onclick = function () {
            let username = ipts[0].value
            let password = ipts[1].value
            let url = `http://jx.xuzhixiang.top/ap/api/login.php?username=${username}&password=${password}`
            axios.get(url).then(res => {
                console.log(res.data)
                alert(res.data.msg)
                if (res.data.code == 1) {
                    localStorage.setItem('token', res.data.data.token)
                    localStorage.setItem('username', res.data.data.username)
                    localStorage.setItem('id', res.data.data.id)

                    location.href = 'index.html'
                }
            })





        }
        ipts[3].onclick=function(){
            location.href='注册.html'
        }




    </script>


</body>

</html>